<template>
  <view class="my-list">
    <Paglist
      v-model="dataList"
      :is-init-api="true"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="260"
      :is-show-loadmore="dataList.length >= 1"
    >
      <template v-for="v in dataList" :key="v.id">
        <view class="list-item">
          <BusinessOpportunitiesItem
            v-bind="v"
            @manage="handleManage(v)"
            @detail="handleDetail(v)"
            @tocooperation="handleToCooperation(v)"
            @share="emits('share', v)"
          ></BusinessOpportunitiesItem>
        </view>
      </template>
    </Paglist>
  </view>
</template>
<script setup lang="ts">
  import Paglist from '@/components/Paglist/index.vue';
  import BusinessOpportunitiesItem from './BusinessOpportunitiesItem.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { boInfoList } from '@/api/businessOpportunities';
  import type {
    IBoInfoListQuery,
    IBusinessOpportunityList,
  } from '@/api/businessOpportunities/type';
  import { ref, provide, type PropType, watch } from 'vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    parame: {
      type: Object as PropType<IBoInfoListQuery>,
      default: () => ({
        boStatus: null,
        current: 1,
        size: 10,
      }),
    },
  });
  provide('api', async (obj: IBoInfoListQuery) => {
    const res = await boInfoList(obj);
    return res;
  });
  const dataList = ref<IBusinessOpportunityList[]>([]);

  const [register, { refresh }] = useConList();

  watch(
    () => props.parame,
    () => {
      refresh();
    },
    { deep: true },
  );

  const emits = defineEmits(['manage', 'share']);
  const handleManage = (v: IBusinessOpportunityList) => {
    emits('manage', v);
  };

  const handleToCooperation = (v: IBusinessOpportunityList) => {
    navigateTo({
      name: 'intentionCooperation',
      options: {
        id: v.id,
        type: 'list',
        boType: v.boType,
        title: v.title,
      },
    });
  };
  const handleDetail = (v: IBusinessOpportunityList) => {
    navigateTo({
      name: 'supplyDemandDetails',
      options: {
        id: v.id,
        successFn: () => {
          refresh();
        },
      },
    });
  };
  defineExpose({
    refresh,
  });
</script>
<style lang="scss" scoped>
  .list-item {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    &:nth-child(1) {
      padding-top: 30rpx;
    }
  }
</style>
